<template>
    <div class="main-container" v-loading="loading">
        <div class="detail-head"  v-if="!loading">
            <div class="left" @click="back()">
                <span class="iconfont iconxiangzuojiantou !text-xs"></span>
                <span class="ml-[1px]">{{ t("returnToPreviousPage") }}</span>
            </div>
            <span class="adorn">|</span>
            <span class="right">{{ pageName }}</span>
        </div>
        <el-card class="box-card !border-none" shadow="never">
            <el-form :model="formData" label-width="130px" ref="formRef" :rules="formRules" class="page-form"  v-if="!loading">
                <div class="text-sm leading-[25px] title">{{ t('titleOne') }}</div>
                <el-card class="box-card !border-none" shadow="never">
                    <el-form-item v-if="formData.is_default == '0'" :label="t('levelWeight')" prop="level_num">
                        <div>
                            <div class="flex">
                                <template v-for="(item, index) in config.levelWeightList" :key="item.id">
                                    <div v-if="config.levelWeightDisableList.includes(item.id) && item.id != level_num"
                                        class="w-[62px] h-[32px] leading-[32px] text-center bg-[#f1f1f1] rounded-[4px] cursor-not-allowed border-box mr-[10px]">
                                        {{ item.name }}</div>
                                    <div v-else
                                        class="w-[62px] h-[32px] leading-[30px] text-center border-[1px] border-[#eee] border-solid rounded-[4px] cursor-pointer border-box mr-[10px]"
                                        :class="{ 'border-[var(--el-color-primary)]': item.id == formData.level_num }"
                                        @click="levelWeightChange(item.id)">{{ item.name }}</div>
                                    <el-input style="display: none;" v-model="formData.level_num" clearable
                                        class="input-width" />
                                </template>

                            </div>
                            <p class="text-[var(--el-text-color-secondary)] text-[12px] leading-[25px]">{{ t('levelWeightTip') }}</p>
                        </div>
                    </el-form-item>
                    <el-form-item :label="t('levelName')" prop="level_name">
                        <el-input v-model="formData.level_name" clearable :placeholder="t('levelNamePlaceholder')" class="input-width" />
                    </el-form-item>
                    <!-- 分红比例 -->
                    <el-form-item :label="t('Rate')" prop="rate">
                        <div>
                            <el-input v-model="formData.rate" clearable class="input-width" @keyup="filterDigit($event)">
                                <template #append>%</template>
                            </el-input>
                            <p class="text-[var(--el-text-color-secondary)] text-[12px] leading-[25px]">{{ t('oneRatePlaceholder') }}</p>
                        </div>
                    </el-form-item>

                    <!-- 封顶金额 -->
                    <el-form-item :label="t('Max')" prop="max_money" v-if="shareholderConfig.is_max === '1'">
                        <div>
                            <el-input v-model="formData.max_money" clearable class="input-width" @keyup="filterDigit($event)">
                                <template #append>元</template>
                            </el-input>
                            <p class="text-[var(--el-text-color-secondary)] text-[12px] leading-[25px]">{{ t('maxMoneyTip') }}</p>
                        </div>
                    </el-form-item>

                    <!-- 要同步的分销等级 -->
                    <el-form-item :label="t('fenxiaoLevel')" prop="fenxiao_level" v-if="shareholderConfig.fenxiao_level === '1'">
                        <div>
                            <el-select v-model="formData.fenxiao_level" clearable class="input-width" :placeholder="t('selectFenxiaoLevel')">
                                <el-option
                                    v-for="level in fenxiaoLevelOptions"
                                    :key="level.level_id"
                                    :label="level.level_name"
                                    :value="level.level_id"
                                    :disabled="level.level_id === undefined">
                                </el-option>
                            </el-select>
                        </div>
                    </el-form-item>
                </el-card>

                <!-- 升级条件设置 -->
                <template v-if="formData.is_default == '0'">
                    <div class="text-sm leading-[25px] title">{{ t('titleTwo') }}</div>
                    <el-card class="box-card !border-none" shadow="never">
                        <el-form-item :label="t('upgradeMethod')" class="!mb-0">
                            <el-radio-group v-model="formData.upgrade_type">
                                <el-radio label="0">{{ t('upgradeMethodLabelOne') }}</el-radio>
                                <el-radio label="1">{{ t('upgradeMethodLabelTwo') }}</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item prop="card_ids" v-if="config.cardList.length">
                            <div class="mt-[10px] flex flex-wrap">
                                <div v-for="(item, index) in config.cardList" :key="index"
                                    class="h-[32px] flex flex-shrink-0 items-center px-[16px] border-[1px] border-[#eee] border-solid rounded-[2px] cursor-pointer mr-[10px] mb-[10px]"
                                    :class="{ 'border-[var(--el-color-primary)]': item.is_checkbox }"
                                    @click="upgradeMethodChange(item)">
                                    <span>{{ item.card_name }}</span>
                                    <el-tooltip class="box-item" effect="light" :content="item.card_desc" placement="bottom">
                                        <span class="iconfont iconwenhao ml-[5px]"></span>
                                    </el-tooltip>
                                </div>
                            </div>
                        </el-form-item>
                    </el-card>
                    <div class="text-sm leading-[25px] title">{{ t('titleThree') }}</div>
                    <el-card class="box-card !border-none" shadow="never">
                        <template v-for="(item, index) in config.cardList" :key="index">
                            <!-- 所有普通条件卡片，非child_level_num卡片的处理 -->
                            <el-form-item v-if="item.is_checkbox && item.key !== 'child_level_num'" :label="item.card_name" :prop="item.key" :rules="[{
                                trigger: 'blur',
                                required: true,
                                validator: (rule: any, value: any, callback: any) => {
                                    if (!value) {
                                        return callback(t('rulesPlaceholderOne') + item.card_name)
                                    } else if (value <= 0) {
                                        return callback(item.card_name + t('rulesPlaceholderThree'))
                                    } else if (item.key === 'order_goods_id' && item.unit === 'ID') {
                                        // 如果是 order_goods_id 且单位是 ID，进行特定的验证
                                        const ids = value.split(',');
                                        // for (const id of ids) {
                                        //     if (!regExp.number.test(id)) {
                                        //         return callback(`[${item.card_name}]${t('rulesPlaceholderTwo')}`);
                                        //     }
                                        // }
                                        return callback();
                                    } else if (!regExp.digit.test(value) && item.unit == '元') {
                                        return callback(`[${item.card_name}]${t('rulesPlaceholderTwo')}`)
                                    } else if (!regExp.number.test(value) && item.unit != '元') {
                                        return callback(`[${item.card_name}]${t('rulesPlaceholderTwo')}`)
                                    } else {
                                        return callback()
                                    }
                                }
                            }]" label-width="175px">
                                <el-input v-model="formData[item.key]" clearable class="input-width mr-[10px]">
                                    <template #append>{{ item.unit }}</template>
                                </el-input>
                                <el-button type="primary" link @click="upgradeMethodDelete(item)">{{ t('delete') }}</el-button>
                            </el-form-item>
                            
                            <!-- 特殊处理 child_level_num 卡片 -->
                            <el-form-item v-if="item.is_checkbox && item.key === 'child_level_num'" :label="item.card_name" prop="child_level_num" :rules="childLevelNumRules" label-width="175px">
                                <div>
                                    <!-- 循环显示所有直推等级条件 -->
                                    <div v-for="(levelCondition, levelIndex) in childLevelConditions" :key="levelIndex" class="flex items-center mb-3">
                                        <el-select 
                                            v-model="levelCondition.level_id" 
                                            class="mr-2 input-width" 
                                            :placeholder="t('selectLevelPlaceholder')">
                                            <el-option 
                                                v-for="level in levelOptions" 
                                                :key="level.level_id" 
                                                :label="level.level_name" 
                                                :value="level.level_id"
                                                :disabled="isLevelSelected(level.level_id, levelIndex)">
                                            </el-option>
                                        </el-select>
                                        <el-input 
                                            v-model="levelCondition.level_num" 
                                            class="mr-2 input-width-small" 
                                            @keyup="filterNumber($event, levelCondition, 'level_num')"
                                            :placeholder="t('enterNumberPlaceholder')">
                                            <template #append>{{ item.unit }}</template>
                                        </el-input>
                                        <el-button type="danger" link @click="removeLevelCondition(levelIndex)">{{ t('delete') }}</el-button>
                                    </div>
                                    <div class="mt-2 flex">
                                        <el-button type="primary" link @click="addLevelCondition">{{ t('addLevelCondition') }}</el-button>
                                        <el-button type="danger" link @click="upgradeMethodDelete(item)">{{ t('deleteLevelCondition') }}</el-button>
                                    </div>
                                </div>
                            </el-form-item>
                        </template>
                    </el-card>
                </template>
            </el-form>
        </el-card>
        <div class="fixed-footer-wrap">
            <div class="fixed-footer">
                <el-button type="primary" @click="save()" :loading="repeat">{{ t('save') }}</el-button>
                <el-button @click="back()">{{ t('back') }}</el-button>
            </div>
        </div>
    </div>
</template>
<script lang="ts" setup>
import { ref, reactive, computed, watch, onMounted } from "vue";
import { t } from "@/lang";
import { getShareholderLevelInfo, getShareholderLevelNum, getShareholderLevelCard, 
    addShareholderLevel, editShareholderLevel, getShareholderLevelListPage, geFenxiaoLevelList } from '@/addon/ly_shareholder/api/level'
import { getShareholderConfig } from '@/addon/ly_shareholder/api/config'
import { FormInstance } from 'element-plus'
import { useRoute, useRouter } from "vue-router";
import { filterDigit } from '@/utils/common'

    // 添加调用标记变量
    let fetchingLevelInfo = false;
    let fetchingLevelNum = false;
    let fetchingLevelCard = false;

const route = useRoute();
const router = useRouter();
const pageName = route.meta.title;

// 股东等级列表选项
const levelOptions = ref<LevelOption[]>([]);

// 直推某个等级人数条件
const childLevelConditions = ref<LevelCondition[]>([]);

// 分销等级选项接口
interface FenxiaoLevelOption {
    level_id: number;
    level_name: string;
    level_num: number;
}

// 股东配置
interface ShareholderConfig {
    fenxiao_level: string;
    [key: string]: any;
}

// 请求响应接口类型定义
interface ApiResponse<T = any> {
    code: number;
    data: T;
    msg: string;
}

// 等级选项接口
interface LevelOption {
    level_id: number;
    level_name: string;
    level_num: number;
}

// 等级条件接口
interface LevelCondition {
    level_id: string;
    level_num: string;
}

// 开发调试模式标志
const DEBUG_MODE = true; // 开发时设为true，生产环境记得设为false

// 调试日志辅助函数
const debug = (...args: any[]) => {
    if (DEBUG_MODE) {
        console.log('[DEBUG]', ...args);
    }
};


// 获取股东等级列表
const fetchLevelOptions = async () => {
    try {
        debug('开始获取股东等级列表...');
        const res = await getShareholderLevelListPage() as unknown as ApiResponse<LevelOption[]>;
        debug('股东等级API返回数据:', res);
        
        if (res && res.code === 1) {
            levelOptions.value = res.data || [];
            debug('处理后的股东等级列表数据:', levelOptions.value);
        } else {
            console.error('获取股东等级列表失败:', res?.msg || '未知错误');
        }
    } catch (error) {
        console.error("获取等级列表失败", error);
    }
};

// 检查用户是否已选择某个等级（避免重复选择）
const isLevelSelected = (levelId: number | string, currentIndex: number) => {
    return childLevelConditions.value.some((item, index) => 
        index !== currentIndex && item.level_id === levelId
    );
};

// 添加新的等级条件
const addLevelCondition = () => {
    childLevelConditions.value.push({
        level_id: '',
        level_num: ''
    });
};

// 移除等级条件
const removeLevelCondition = (index: number) => {
    childLevelConditions.value.splice(index, 1);
};

// 数字输入过滤
const filterNumber = (event: Event, obj: any, key: string) => {
    const target = event.target as HTMLInputElement;
    let value = target.value;
    // 只允许输入数字
    value = value.replace(/[^\d]/g, '');
    obj[key] = value;
};

// 等级条件验证规则
const childLevelNumRules = [
    {
        validator: (rule: any, value: any, callback: any) => {
            // 确保每个条件都填写完整
            const hasInvalid = childLevelConditions.value.some(item => 
                !item.level_id || !item.level_num || parseInt(item.level_num) <= 0
            );
            
            if (childLevelConditions.value.length === 0) {
                return callback(new Error(t('pleaseAddLevelCondition')));
            }
            
            if (hasInvalid) {
                return callback(new Error(t('invalidLevelCondition')));
            }
            
            // 检查是否有重复的等级
            const levelIds = childLevelConditions.value.map(item => item.level_id);
            const uniqueLevelIds = new Set(levelIds);
            if (levelIds.length !== uniqueLevelIds.size) {
                return callback(new Error(t('duplicateLevelError')));
            }
            
            callback();
        },
        trigger: 'change'
    }
];

const config = ref<any>({
    levelWeightList: [
        { id: 1, name: '一级' },
        { id: 2, name: '二级' },
        { id: 3, name: '三级' },
        { id: 4, name: '四级' },
        { id: 5, name: '五级' },
        { id: 6, name: '六级' },
        { id: 7, name: '七级' },
        { id: 8, name: '八级' },
        { id: 9, name: '九级' },
        { id: 10, name: '十级' },
    ],
    levelWeightDisableList: [],
    cardList: []
})

// 分销等级列表
const fenxiaoLevelOptions = ref<FenxiaoLevelOption[]>([]);

// 添加一个计算属性，用于获取当前选中的分销等级名称
const selectedFenxiaoLevelName = computed(() => {
    if (!formData.fenxiao_level || !fenxiaoLevelOptions.value.length) return '';
    
    const selectedLevel = fenxiaoLevelOptions.value.find(
        (level: FenxiaoLevelOption) => level.level_id.toString() === formData.fenxiao_level
    );
    
    return selectedLevel ? selectedLevel.level_name : '';
});

// 股东配置
const shareholderConfig = ref<ShareholderConfig>({
    fenxiao_level: '0'
});

/**
 * 表单数据
 */
const initialFormData = {
    id: 0,
    is_default: '0',
    level_num: 0,
    level_name: '',
    rate: '',
    recharge_money: '0.00',
    upgrade_type: '0',
    max_money: '0.00',
    order_goods_id: [],
    card_ids: [],
    fenxiao_level: '0',
    child_num: '0',
    child2_num: '0',
    child_level_num: [] // 确保初始值为空数组
};
const formData: Record<string, any> = reactive({ ...initialFormData });
const loading = ref<Boolean>(false)
const level_num = ref(0)
// 正则表达式
const regExp = {
    required: /[\S]+/,
    number: /^\d{0,10}$/,
    digit: /^\d{0,10}(.?\d{0,2})$/,
    special: /^\d{0,10}(.?\d{0,3})$/
}
const oneRateCheck = (rule: any, value: any, callback: any) => {
    if (!value) {
        return callback(new Error(t('oneRatePlaceholderOne')))
    } else if (!regExp.digit.test(value)) {
        return callback(new Error(t('oneRatePlaceholderTwo')))
    } else if (value >= 100) {
        return callback(new Error(t('oneRatePlaceholderThree')))
    } else if (value <= 0) {
        return callback(new Error(t('oneRatePlaceholderFour')))
    } else {
        return callback()
    }
}

const levelNum = (rule: any, value: any, callback: any) => {
    if (!value) {
        return callback(new Error(t('levelWeightPlaceholder')))
    } else {
        return callback()
    }
}
const formRules = computed(() => {
    return {
        level_num: [{ required: true, validator: levelNum, trigger: 'change' }],
        level_name: [{ required: true, message: t('levelNamePlaceholder'), trigger: 'blur' }],
        rate: [{ required: true, validator: oneRateCheck, trigger: 'blur' }],
        card_ids: [{ type: 'array', required: true, message: t('upgradeMethodPlaceholder'), trigger: 'change' }],
        child_level_num: childLevelNumRules,
        fenxiao_level: [{ required: false, trigger: 'change' }]
    }
})
const formRef = ref<FormInstance>()


const levelWeightChange = (id: Number) => {
    formData.level_num = id
}
const upgradeMethodChange = (item: any) => {
    item.is_checkbox = item.is_checkbox ? 0 : 1

    if (item.is_checkbox) {
        formData.card_ids.push(item.card_id)
        // 删除默认添加逻辑，用户需要手动添加
        // if (item.key === 'child_level_num' && childLevelConditions.value.length === 0) {
        //     addLevelCondition();
        // }
    } else {
        let index = formData.card_ids.indexOf(item.card_id)
        formData.card_ids.splice(index, 1)
        // 清空直推等级条件卡片内容
        if (item.key === 'child_level_num') {
            childLevelConditions.value = [];
        }
    }
    formRef.value?.validateField('card_ids')
}
const upgradeMethodDelete = (item: any) => {
    item.is_checkbox = 0
    let index = formData.card_ids.indexOf(item.card_id)
    formData.card_ids.splice(index, 1)
    // 清空直推等级条件卡片内容
    if (item.key === 'child_level_num') {
        childLevelConditions.value = [];
    }
    formRef.value?.validateField('card_ids')
}
//获取详情
const getShareholderLevelInfoFn = (id: any) => {
    if (fetchingLevelInfo) return;
    fetchingLevelInfo = true;
    
    getShareholderLevelInfo(id).then((res) => {
        // 先处理fenxiao_level字段，确保它被正确设置
        if (res.data.fenxiao_level !== undefined && res.data.fenxiao_level !== null) {
            // 将fenxiao_level转换为数字类型
            formData.fenxiao_level = Number(res.data.fenxiao_level);
        }
        
        // 处理其他字段
        Object.keys(formData).forEach((key: any) => {
            if (key !== 'fenxiao_level' && res.data[key] != undefined) {
                formData[key] = res.data[key].toString();
            }
        })
        
        Object.values(config.value.cardList).forEach((el: any) => {
            if (res.data[el.key] != undefined) {
                if (el.key === 'child_level_num') {
                    // 处理直推某个等级人数条件
                    try {
                        const levelNumData = typeof res.data.child_level_num === 'string' ? 
                            JSON.parse(res.data.child_level_num) : 
                            res.data.child_level_num;
                        
                        // 检查是否有实际数据，而不是空数组
                        if (Array.isArray(levelNumData) && levelNumData.length > 0) {
                            childLevelConditions.value = levelNumData;
                            // 只有在编辑已有数据时才设置is_checkbox
                            if (id) {
                                el.is_checkbox = 1;
                                if (!formData.card_ids.includes(el.card_id)) {
                                    formData.card_ids.push(el.card_id);
                                }
                            } else {
                                // 新增模式下不自动选择
                                el.is_checkbox = 0;
                                const index = formData.card_ids.indexOf(el.card_id);
                                if (index !== -1) {
                                    formData.card_ids.splice(index, 1);
                                }
                            }
                        } else {
                            // 如果是空数组，确保不选中
                            childLevelConditions.value = [];
                            el.is_checkbox = 0;
                            const index = formData.card_ids.indexOf(el.card_id);
                            if (index !== -1) {
                                formData.card_ids.splice(index, 1);
                            }
                        }
                    } catch (error) {
                        console.error("解析 child_level_num 失败", error);
                        childLevelConditions.value = [];
                        // 解析失败时确保不选中
                        el.is_checkbox = 0;
                        const index = formData.card_ids.indexOf(el.card_id);
                        if (index !== -1) {
                            formData.card_ids.splice(index, 1);
                        }
                    }
                } else {
                    formData[el.key] = res.data[el.key]
                    if (!formData.card_ids.includes(el.card_id) && el.is_checkbox) {
                        formData.card_ids.push(el.card_id)
                    }
                }
            }
        })
        level_num.value = res.data.level_num
        loading.value = false
        fetchingLevelInfo = false;
    }).catch(() => {
        loading.value = false
        fetchingLevelInfo = false;
    })
}
formData.id = route.query.id || 0
//获取股东等级权重已设置列表
const getShareholderLevelNumFn = () => {
    if (fetchingLevelNum) return;
    fetchingLevelNum = true;
    
    loading.value = true
    getShareholderLevelNum().then((res: any) => {
        config.value.levelWeightDisableList = res.data.map((el: any) => el.level_num)
        getShareholderLevelCardFn(formData.id)
        fetchingLevelNum = false;
    }).catch(() => {
        loading.value = false
        fetchingLevelNum = false;
    })
}

//获取股东等级升级条件卡片数据
const getShareholderLevelCardFn = (id: any) => {
    if (fetchingLevelCard) return;
    fetchingLevelCard = true;
    
    getShareholderLevelCard({ id: id }).then((res: any) => {
        config.value.cardList = res.data
        if (formData.id) {
            getShareholderLevelInfoFn(formData.id)
        } else {
            loading.value = false
        }
        fetchingLevelCard = false;
    }).catch(() => {
        loading.value = false
        fetchingLevelCard = false;
    })
}

// 获取股东配置
const getConfig = async () => {
    try {
        const res: any = await getShareholderConfig();
        if (res.code === 1 && res.data) {
            shareholderConfig.value = res.data;
        }
    } catch (error) {
        console.error('获取股东配置失败:', error);
    }
};

// 获取分销等级列表
const getFenxiaoLevels = async () => {
    try {
        const res: any = await geFenxiaoLevelList();
        if (res.code === 1 && res.data) {
            // 确保level_id是数字类型
            fenxiaoLevelOptions.value = res.data.map((level: any) => ({
                ...level,
                level_id: Number(level.level_id)
            }));
            
            console.log('获取到的分销等级列表:', fenxiaoLevelOptions.value);
            console.log('当前表单中的fenxiao_level值:', formData.fenxiao_level);
            
            // 检查当前选中的分销等级是否在列表中
            if (formData.fenxiao_level) {
                const selectedLevel = fenxiaoLevelOptions.value.find(
                    (level: FenxiaoLevelOption) => level.level_id === formData.fenxiao_level
                );
                console.log('选中的分销等级:', selectedLevel);
            }
        }
    } catch (error) {
        console.error('获取分销等级列表失败:', error);
    }
};

// 初始化获取等级列表和其他数据
onMounted(async () => {
    // 重置所有调用标记
    fetchingLevelInfo = false;
    fetchingLevelNum = false;
    fetchingLevelCard = false;
    
    // 先获取股东配置
    await getConfig();
    
    // 如果开启了分销等级同步，获取分销等级列表
    if (shareholderConfig.value.fenxiao_level === '1') {
        await getFenxiaoLevels();
    }
    
    // 获取等级列表
    await fetchLevelOptions();
    
    // 获取等级权重和卡片数据
    getShareholderLevelNumFn();
});

// 确保在每次重新选择直推等级卡片时重新加载等级列表 - 修改watch逻辑避免不必要的调用
watch(() => config.value.cardList, (newVal) => {
    // 找到直推等级卡片
    const levelCard = newVal.find((item: any) => item.key === 'child_level_num');
    // 如果卡片存在且被选中，确保我们有最新的等级列表
    if (levelCard && levelCard.is_checkbox && levelOptions.value.length === 0) {
        fetchLevelOptions();
    }
}, { deep: true });

const repeat = ref<boolean>(false)
const save = () => {
    formRef.value?.validate((valid) => {
        if (valid) {
            if (repeat.value) return
            repeat.value = true
            
            // 将childLevelConditions数组赋值给formData.child_level_num
            const saveData = { ...formData };
            
            // 检查是否选择了child_level_num卡片
            const childLevelCard = config.value.cardList.find((c: any) => c.key === 'child_level_num');
            if (childLevelCard && childLevelCard.is_checkbox) {
                // 如果选择了卡片，使用childLevelConditions的值
                saveData.child_level_num = childLevelConditions.value;
            } else {
                // 如果没有选择卡片，设置为空数组
                saveData.child_level_num = [];
            }
            
            // 筛选出选择的条件卡片
            let api = formData.id ? editShareholderLevel : addShareholderLevel
            
            // 删除未选中卡片的数据
            Object.values(config.value.cardList).forEach((el: any) => {
                if (!el.is_checkbox) delete saveData[el.key]
            })
            
            api(saveData).then((res) => {
                repeat.value = false
                back()
            }).catch(() => {
                repeat.value = false
            })
        }
    })
}
const back = () => {
    router.push('/ly_shareholder/shareholder_level')
};
</script>
<style lang="scss" scoped>
/*.title {
    &::after {
        content: "";
        display: inline-block;
        width: 3px;
        height: 14px;
        background-color: var(--el-color-primary);
        position: absolute;
        left: 0;
        top: 50%;
        border-radius: 5px;
        transform: translateY(-50%);
    }
}*/

.el-form-item {
    .el-form-item {
        margin-bottom: 18px;
    }
}

.input-width {
    width: 220px;
}

.input-width-small {
    width: 150px;
}

.mb-3 {
    margin-bottom: 0.75rem;
}

.mr-2 {
    margin-right: 0.5rem;
}

.mt-2 {
    margin-top: 0.5rem;
}

.flex-wrap {
    flex-wrap: wrap;
}

.items-center {
    align-items: center;
}

.mb-\[10px\] {
    margin-bottom: 10px;
}

.el-input.el-input-group--append {
    width: 170px;
}
</style>
